<template>
    <div>
        <el-form :model="queryParams" :inline="true" ref="queryForm" label-width="85px">
            <el-row>
                <!-- <el-col :span="6">
                    <el-form-item label="缺陷地点" prop="ncrType">
                        <el-select v-model="queryParams.ncrType" size="small" reserve-keyword :placeholder="$t('public.inputPl')+'缺陷地点'">
                            <el-option label="线上" value="线上" />
                            <el-option label="来料检验" value="来料检验" />
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="6">
                    <!-- 缺陷维度 -->
                    <el-form-item :label="$t('statistics.DefectDimension')" prop="defectDim">
                        <el-select v-model="queryParams.defectDim" size="small" reserve-keyword :placeholder="$t('public.inputPl')+$t('statistics.DefectDimension')">
                            <el-option label="大缺陷" value="大缺陷" />
                            <el-option label="小缺陷" value="小缺陷" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="6">
                    <el-form-item label="物料大类" prop="materialMax">
                        <el-select v-model="queryParams.materialMax" filterable size="small" reserve-keyword @change="handleMaterialMaxChange" :placeholder="$t('public.inputPl')+'物料大类'">
                            <el-option v-for="(item,index) in materialMaxOptions" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <!-- <el-col :span="6">
                    <el-form-item label="物料中类" prop="materialMiddle">
                        <el-select v-model="queryParams.materialMiddle" multiple filterable size="small" reserve-keyword :placeholder="$t('public.inputPl')+$t('defectIncoming.materialMiddle')">
                            <el-option v-for="(item,index) in materialMiddleOptions" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="6">
                    <!-- 厂区-->
                    <el-form-item :label="$t('statistics.factory')" prop="factoryCode">
                        <el-select v-model="queryParams.factoryCode" multiple filterable size="small" reserve-keyword :placeholder="$t('public.inputPl')+'厂区'">
                            <el-option v-for="item in factoryOptions" :key="item.plantCode" :label="item.plantName" :value="item.plantCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <!-- 物料名称-->
                    <el-form-item :label="$t('statistics.materialName')" prop="materialName">
                        <el-input v-model="queryParams.materialName" :placeholder="$t('public.placeholder',{placeholder: $t('material.materialName')})" clearable size="small" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="6">
                    <el-form-item label="成熟度" prop="maturity">
                        <el-select v-model="queryParams.maturity" multiple filterable size="small" reserve-keyword :placeholder="$t('public.select_holder',{select_holder: '成熟度'})">
                            <el-option v-for="item in dict.type.NYIQC_MATURITY" :key="item.label" :label="item.label" :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="6">
                    <!-- 供应商编号-->
                    <el-form-item :label="$t('statistics.supplierNo')" prop="supplierCode">
                        <el-input v-model="queryParams.supplierCode" :placeholder="$t('public.placeholder',{placeholder: '供应商编号'})" clearable size="small" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <!-- 时间范围 -->
                    <el-form-item :label="$t('statistics.inspectEndTime')" prop="dateRange">
                        <el-date-picker style="width:200px" v-model="queryParams.dateRange" type="daterange" value-format="yyyy-MM-dd" :range-separator="$t('cockpit.to')" size="small" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col align='center'>
                    <el-button type="primary" class="query" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('public.query')}}</el-button>
                    <el-button icon="el-icon-refresh" class="resectBtn" size="mini" @click="resetQuery">{{$t('public.reset')}}</el-button>
                </el-col>
            </el-row>
        </el-form>

        <!-- ecahrt 容器 -->
        <bar-chart height="400px" width="100%" :chartData="chartData" :dataList="pieData" />

        <!-- 表格数据 -->
        <el-table max-height="350" border stripe v-loading="loading" :data="tableLists">
            <!--          序号-->
            <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
            <!--          缺陷名-->
            <el-table-column :label="$t('statistics.DefectName')" align="left" prop="defectName" show-overflow-tooltip />
            <!--          缺陷次数-->`
            <el-table-column :label="$t('statistics.DefectNum')" align="left" prop="defectCount" show-overflow-tooltip />
            <!--          缺陷占比-->
            <el-table-column :label="$t('statistics.DefectProportion')" align="left" prop="defectProportion" show-overflow-tooltip>
                <template slot-scope="scope">
                    <div>{{(scope.row.defectProportion * 100).toFixed(2) + '%'}}</div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
    </div>
</template>
<script>
import {getItemFResultList, getItemFResultPie, getItemnFaultChart,} from '@/api/basic/analysiss'

import BarChart from './echarts/BarChart'
import {listALLFactory} from '@/api/basic/factory'
import {getMasterialMaxMinData, listALLMaterialType,} from '@/api/basic/materialtype'

export default {
    name: 'inspectionItem',
    components: {
        BarChart,
    },
    dicts: [
        'NYIQC_GAUGE_TYPE', //量具类型
        'NYIQC_MATURITY',
    ],
    // components:{Detail},
    data() {
        return {
            materialTypeOptions: [],
            factoryOptions: [], //厂区容器
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // 字典表格数据
            tableLists: [],
            // 弹出层标题
            title: '',
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                ncrType: '',
                defectDim: '',
                factoryCode: '',
                materialName: '',
                maturity: [],
                supplierCode: '',
                materialMiddle: [],
                materialMax: '',
                // 日期范围
                dateRange: [],
                startTime: '',
                endTime: '',
            },
            // 图表数据
            chartData: {},
            materialMaxOptions: [],
            materialMiddleOptions: [],
        }
    },
    created() {
        this.getList()
        this.getFactoryList()
        this.getMaterialType({}, 'materialMax')
        this.getMaterialType({ materialMax: 'all' }, 'materialMiddle')
    },
    methods: {
        filterParams(p) {
            if (p && p.length) {
                return p.join(',')
            } else {
                return ''
            }
        },
        getMaterialType(params, name) {
            let array = []
            getMasterialMaxMinData(params).then((res) => {
                array = res.data.map((item) => item[name])
                if (name === 'materialMax') {
                    this.materialMaxOptions = array
                } else if (name === 'materialMiddle') {
                    this.materialMiddleOptions = array
                }
            })
        },
        handleMaterialMaxChange(e) {
            this.getMaterialType({ materialMax: e || 'all' }, 'materialMiddle')
            if (this.queryParams.materialMiddle.length) {
                this.$set(this.queryParams, 'materialMiddle', [])
            }
        },
        /** 查询字典类型列表 */
        getList() {
            this.loading = true
            let params = JSON.parse(JSON.stringify(this.queryParams))
            params.materialMiddle = this.filterParams(params.materialMiddle)
            params.maturity = this.filterParams(params.maturity)
            params.factoryCode = this.filterParams(params.factoryCode)
            if (params.dateRange.length) {
                params.startTime = params.dateRange[0]
                params.endTime = params.dateRange[1]
            } else {
                params.startTime = ''
                params.endTime = ''
            }
            delete params.dateRange
            getItemnFaultChart(params).then((response) => {
                if (response.code == 200) {
                    console.log(response.data)
                    this.chartData = response.data
                }
            })
            getItemFResultPie(params).then((response) => {
                if (response.code == 200) {
                    console.log(response.data)
                    this.pieData = response.data
                }
            })

            getItemFResultList(params).then((response) => {
                if (response.code == 200 && response.rows) {
                    this.tableLists = response.rows
                    this.total = response.total
                    this.loading = false
                }
            })
        },
        // 获取厂区数据
        getFactoryList() {
            listALLFactory().then((res) => {
                this.factoryOptions = res.data
            })
        },
        handleMaterialMessageTypeChange(e) {
            this.queryParams.gaugeType = e.join(',')
        },
        // 表单重置
        reset() {
            this.form = {
                dictId: undefined,
                dictName: undefined,
                dictType: undefined,
                status: '0',
                remark: undefined,
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
            this.handleQuery()
        },

        materialTypeRemoteMethod(e) {
            listALLMaterialType({ materialTypeName: e }).then((res) => {
                this.materialTypeOptions = res.data
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.mt10 ::v-deep .el-form-item {
    margin-bottom: 0;
}
.list-container ::v-deep .el-aside {
    display: none;
}
</style>
